import React from 'react';
import { connect } from 'react-redux';
import BaseComponent from '../../components/common/baseComponent.js';
import bannerIcon from '../../../assets/images/escort/giftCenter/banner.png';
import ServiceTel from '../../components/common/serviceTel';
import LogouAlert from '../../components/alert/alert.logout';
import bannerInfoIcon from '../../../assets/images/escort/giftCenter/banner_info.png';
import telBanner from '../../../assets/images/escort/telmodal/banner3.png';
import WillPage from '../../components/coupon/willPage';
import TelModal from '../../components/coupon/telModal';
import { get } from '../../utils/storage';

@connect(({ escort, user, insurance }) => {
  return {
    hasBuy: escort.get('hasBuyMenber'),
    menberActive: escort.get('menberActive'),
    escortBuyMonth: escort.get('escortBuyMonth'),
    couponCount: user.getIn(['gift', 'couponCount']),
    activationCount: user.getIn(['gift', 'activationCount']),
    sumGift: user.getIn(['gift', 'sum']),
    user: user.get('user'),
    showAddInfo: insurance.get('showAddInfo'),
    showWill:insurance.get("showWill")
  };
})
class GiftCenter extends BaseComponent {
  state = {

    showWill:false,
    showPageNum:0,//展示车险提示页次数
    WillInfo:false//展示车险banner
  }

  componentDidMount() {
    let showPageNum=get("showPageNum");
    let WillInfo=get("WillInfo");
    this.setState({
      showPageNum:showPageNum,
      WillInfo:WillInfo
    })
    this.requestData();
  }

  requestData = () => {
    this.props.dispatch({
      type: 'escort/fetchBuyStatus',
    });
    this.props.dispatch({
      type: 'user/fetchSumGift',
    });
    this.props.dispatch({
      type: 'user/fetchUserCouponTotal',
    });
    this.props.dispatch({
      type: 'insurance/fetchHasInfo',
    });
    this.props.dispatch({
      type:'insurance/fetchShowWill'
    })
  }
  goMenberPackage = () => {
    this.props.history.push('menberPackage');
  }

  logout = () => {
    this.alert.close();
    this.props.dispatch({
      type: 'user/logout',
    });
  }

  showLogout = () => {
    this.alert.show();
  }

  goInvoice = () => {
    this.props.dispatch({
      type: 'escort/fetchInvoiceEscort',
    });
  }

  goAddInfo = () => {
    this.props.history.push('addInsuranceInfo');
  }
  closePage=()=>{
  
     this.props.dispatch({
       type: 'insurance/updateWill',
       payload: {
           renewalIntention: 0,
       },
     });  
   }
   showTel=()=>{
    this.telmodal.show();
    //更新车险意愿
    this.props.dispatch({
     type: 'insurance/updateWill',
     payload: {
         renewalIntention: 1,
     },
   });  
   }
   closeInfo=()=>{
     this.props.dispatch({
      type: 'insurance/showPage',
      payload: {
          show: false,
      },
    }); 
    
   }
   showWillInfo=()=>{

     this.props.dispatch({
      type: 'insurance/showPage',
      payload: {
          show: true,
      },
    }); 
   }

  render() {
    const { sumGift, showWill,couponCount, activationCount, menberActive, escortBuyMonth, showAddInfo } = this.props;
    let infoView;
    let willbaner;
    const { showPageNum,WillInfo } = this.state;
    if (showAddInfo) {
      infoView = <img src={bannerInfoIcon} alt="" className="banner" onClick={this.goAddInfo} />;
    }
    if(WillInfo===true&&showPageNum===1){
      willbaner = <img src={telBanner} alt="" className="banner" onClick={this.showWillInfo} />;
    }

    return (
      <div className="gift-center-escort">
      {showPageNum!==1? <WillPage closeFunc={this.closePage} clickFunc={this.showTel} show={showWill} />:null}
         <TelModal ref={telmodal => this.telmodal = telmodal} clickFunc={this.closeInfo} />
        <div className="header">
          <div className="header-cell">
            <div className="cell-title">已为您省钱</div>
            <div className="cell-money">&#65509;{sumGift}</div>
          </div>
          <div className="header-line" />
          <div className="header-cell">
            <div className="cell-title">剩余优惠</div>
            <div className="cell-text">{couponCount}张可使用</div>
            <div className="cell-text">{activationCount}张未激活</div>
          </div>
        </div>
        <div className={`menber-cell ${menberActive ? 'active' : ''}`}>
          <i className="iconfont icon-menber-crown" />
          <div className="title">中油BP金卡会员</div>
          {menberActive ? <div className="text">{escortBuyMonth}个月</div> : null}
        </div>
        {infoView}
        {willbaner}
        <img src={bannerIcon} alt="" className="banner" onClick={this.goMenberPackage} />
        <div className="flex-blank" />
        <ServiceTel className="footer" type="escort" />
        <div className="invoice-btn" onClick={this.showLogout}><div>退出登录</div></div>
        {/* <div className="invoice-btn" onClick={this.goInvoice}><div>开具电子发票</div></div> */}
        <LogouAlert ref={alert => this.alert = alert} confirmFunc={this.logout} title="是否确定退出保驾车服？" />
      </div>
    );
  }
}

export default GiftCenter;
